<template>
  <div class="header">
    <div class="leftBar">
      <div
        @drag.stop="drag('BoolBar')"
        @dragend.stop="dragend('TextIndex')"
        class="droppable-element"
        draggable="true"
        unselectable="on"
      >
        <span>导航栏</span>
      </div>
      <div
        @drag.stop="drag('Banner')"
        @dragend.stop="dragend('Banner')"
        class="droppable-element"
        draggable="true"
        unselectable="on"
      >
        <span>轮播</span>
      </div>
      <div
        @drag.stop="drag('Newsbox')"
        @dragend.stop="dragend('Newsbox')"
        class="droppable-element"
        draggable="true"
        unselectable="on"
      >
        <span>新闻框</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mouseXY: { X: null, y: null },
    };
  },
  mounted() {
    document.addEventListener(
      "dragover",
      (e) => {
        this.mouseXY.x = e.clientX;
        this.mouseXY.y = e.clientY;
      },
      false
    );
  },

  methods: {
    drag(e) {
      this.$emit("modelDrag", this.mouseXY);
    },
    dragend(e) {
      this.$emit("modelDragEnd", { mouseXY: this.mouseXY, title: e });
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.leftBar {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
.droppable-element {
  height: 30px;
  width: 100%;
  text-align: center;
  background: #fdd;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-top: 10px;
  margin: 10px 15px;
  background-image: linear-gradient(
    to top,
    #fdcbf1 0%,
    #fdcbf1 1%,
    #e6dee9 100%
  );
}
</style>